<template>
  <div>
    
    <router-link :to="{path:'/user/user',query:{userid:userid}}" v-if="this.userid">
      <div class="top" v-for="item in user" :key="item.id">
        <img :src="item.user_avator" alt="" placeholder="">
        <div>
          <p class="title">{{ item.nickname }}</p>
          <span class="phone">{{ item.phone }}</span>
        </div>
      </div>
    </router-link>
    <router-link to="/my/login" v-else >
      <div class="top" >
        <img src="@/assets/logo.png" alt="">
        <div style="line-height: 100%;">
          <p class="title">请先登录</p>
        </div>
      </div>
    </router-link>
    <div class="main">
      <router-link to="/video">
        <div class="item">
          <p>最近播放</p>
          <van-icon name="arrow" />
        </div>
      </router-link>
      <router-link to="/content">
        <div class="item">
          <p>我的评论</p>
          <van-icon name="arrow" />
        </div>
      </router-link>
      <router-link to="/history">
        <div class="item">
          <p>我的收藏</p>
          <van-icon name="arrow" />
        </div>
      </router-link>
      <router-link to="/news">
        <div class="item">
          <p>消息通知</p>
          <van-icon name="arrow" />
        </div>
      </router-link>
      <router-link to="/settings">
        <div class="item">
          <p>系统设置</p>
          <van-icon name="arrow" />
        </div>
      </router-link>
      <router-link to="/yijian">
        <div class="item">
          <p>意见反馈</p>
          <van-icon name="arrow" />
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import httpApi from '@/http';

  export default {
    data() {
      return {
        userid: 1,
        user:{
          result: []
        },
        form:{
          userid:this.$route.params.userid 
        }
      }
    },
    methods: {
      getUser() {
        
        let params = {cid:1,pagesize:1,page:1}
        httpApi.userApi.queryByUserId(params).then(res=>{
          this.user = res.data.data.result
          console.log('我的',this.user)
          console.log(1)
          console.log(res.data.data.result.userid)
          console.log(this.user.userid)
          console.log(this.form.userid)
          console.log(this.userid)
        })
      }
    },
    mounted () {
      this.getUser()
    },
  }
</script>

<style lang="scss" scoped>
.top{
  background-color: rgb(242, 242, 242);
  height: 100px;
  display: flex;
}
.top img{
  border-radius: 50%;
  width: 55px;
  height: 55px;
  margin-top: 25px;
  margin-left: 40px;
}
.top div{
  margin-left: 30px;
  margin-top: 30px;
}
.top div .title{
  font-size: 20px;
}
.top div .phone{
  color: rgb(102, 102, 102);
}
.item{
  display: flex; 
  justify-content: space-between;
  font-size: 18px;
  padding: 16px 24px 16px 24px;
  border-bottom: 2px solid rgb(228, 211, 211);
}
</style>